<template>
  <div>
    <el-dialog v-model="dialogVisible" width="80%" :height="dialogHeight">
      <iframe :src="dialogUrl" frameborder="0" width="100%" height="100%"></iframe>
    </el-dialog>
  </div>
</template>

<script setup>

import { ref, watch, defineProps } from 'vue'

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  dialogUrl: {
    type: String,
    default: ''
  }
})

const dialogUrl = ref('')
const dialogVisible = ref(false)
const dialogHeight = ref('auto')

watch(() => props.dialogVisible, (newVal) => {
  dialogVisible.value = newVal
})

watch(() => props.dialogUrl, (newVal) => {
  dialogUrl.value = newVal
})

</script>
